<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<style type="text/css">
    #show{
        width: 1080px;
        height: 360px;
        left: 0;
        position: relative;
    }
    .test{
        position: relative;
        width: 360px;
        margin: 0 auto;
        border: 1px solid red;
        height: 360px;
        margin: 0;
        padding: 0;
    }
    #show>img{
        float: left;
        margin: 0;
        padding: 0;
    }
</style>
<script>
    $(function () {
        var countIndex = 0;
        var imageCount = $('#show img').length;
        var autoCarousel  = setInterval(figureIndex,2000);
        function figureIndex() {
            if (countIndex < imageCount - 1) {
                countIndex++;
            } else {
                countIndex = 0;
            }
            //调用切换
            changeTo(countIndex);
        }
        //切换图片
        function changeTo(num) {
            //切换图片，也就是把figureList类（ul）向左移动。
            var leftGo = num * 360;
            $("#show").animate({"left": "-" + leftGo + "px"}, 500);
        }
    })
</script>
<body>
<script>

</script>
<div class="test">
    <div  id="show">
        <img src="img/cat1.jpg">
        <img src="img/cat2.jpg">
        <img src="img/cat3.jpg">
    </div>
</div>
</body>
</html>